<template>
	<view class="answer">
		<view class="nav flex align-center">
			<image src="/static/chapter/chapter.png" mode=""></image>
			<view class="nums">
				<text>{{ currentPage }}/{{ allList.length }}</text>
			</view>
		</view>
		<view class="card">
			<!-- <swiper circular :current="current" :indicator-dots="false" :autoplay="false" style="height: 100%;"
				@change="swiperChange">
				<swiper-item easing-function="easeOutCubic" v-for="(item, index) in list" :key="index"
					:catchtouchmove="stopTouchMove"> -->
			<!-- <scroll-view v-if="!['STAR', 'END'].includes(item.swiperType)" style="height: 100%;" -->
			<scroll-view style="height: 100%;" :scroll-top="scrollTop[index]" class="scroll-Y"
				@scroll="scroll($event, index)">
				<subject @change="handChange" v-if="thisdet.options!=null" :info="thisdet" :analysis="false">
					<template #no>
						<text class="nums">{{ currentPage }}/{{ allList.length}}</text>
					</template>
				</subject>
			</scroll-view>
			<!-- </swiper-item>
			</swiper> -->
		</view>
		<view class="music">
			<view class="slider-bar">
				<view class="time start">{{curPlayTimeNum }}</view>
				<slider :disabled="sliderDisabled" class="line" :value="curPlayTime" :min="0" :max="playTime"
					@change="sliderChange" block-size="15" backgroundColor="rgba(255,255,255,.5)"
					activeColor="#36c269" />
				<view class="time end">{{playTimeNum}}</view>
			</view>
			<view class="margin-top flex justify-around align-center">
				<!-- 占位 -->
				<view></view>
				<view class="upper" @click="handUp">
					<image src="/static/icon/up.png" mode=""></image>
				</view>
				<view class="play" @click="onSwitch">
					<image v-if="isPlay" src="/static/icon/zanting.png" mode=""></image>
					<image v-else src="/static/icon/paly.png" mode=""></image>
				</view>
				<view class="next" @click="handNext">
					<image src="/static/icon/next.png" mode=""></image>
				</view>
				<view class="cha-list" @click="show = true">
					<image src="/static/icon/list.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar">
					<view class="action text-green"></view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-roundclose"></text>
					</view>
				</view>
				<view class="tabs flex justify-center align-center">
					<view v-for="(item, index) in paperList" :key="index" class="tab flex align-center justify-center"
						:class="{'tab-active' : tabCurren === index}" @click="tabChange(index)">{{ item.paper_name }}
					</view>
					<view class="ht" :style="{left: tabCurren === 0 ? '110rpx' : '390rpx'}"></view>
				</view>
				<view class="con">
					<scroll-view style="height:60vh" scroll-y="true">
						<view class="list">
							<view class="cell flex justify-between align-center" v-for="(item, index) in chapterList"
								:key="index" @click="doClick(item)">
								<view class="name">{{ item.chapter_name }}</view>
								<view class="cell-right flex align-center">
									<text class="value">共{{ item.question_number }}题</text>
									<text class="lg cuIcon-right"></text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<u-modal v-model="lastShow" :content="lastContent" show-cancel-button confirm-color="#36c269"
			@confirm="handContinue"></u-modal>
		<u-popup v-model="show" mode='bottom' border-radius="28">
			<view class="pop_bg">
				<view style="display: flex;align-items: center;margin-top: 48rpx;justify-content: end;">
					<!-- 	<view style="display: flex;align-items: center;" @click="collChange(thisdet)">
						<view class="collect_ttile">收藏</view>
						<image v-if="thisdet.is_collect" src="/static/skill/coll-a.png"
							style="width: 40rpx;height: 40rpx;margin-left: 12rpx;"></image>
						<image v-else src="@/static/no_collect.png"
							style="width: 40rpx;height: 40rpx;margin-left: 12rpx;">
						</image>
					</view> -->
					<!-- <view style="margin-left: 38rpx;">
						<u-icon name="checkmark-circle-fill" color="#36C269" size="44"></u-icon>
					</view>
					<view class="number">{{chance_correct}}</view>
					<view style="margin-left: 25rpx;">
						<u-icon name="close-circle-fill" color="#FF0000" size="44"></u-icon>
					</view>
					<view class="number">{{chance_error}}</view> -->
					<view class="pop_number">
						{{ currentPage }}/{{ allList.length}}
					</view>
				</view>
				<view class="pop_line"></view>
				<scroll-view class="scroll-view" scroll-y="true" :scroll-top="scrollTop">
					<view style="display: flex;flex-wrap: wrap;margin-top: -26rpx;">
						<view v-for="(item,index) in allList" :key="index" @click="chance_question(item,index)">
							<view class="tag_bg" v-if="item.istrue == undefined">{{index+1}}</view>
							<view class="tag_bg" style="background-color: #36c269;color: #FFFFFF;" v-else>{{index+1}}
							</view>
							<!-- <view class="tag_bg" style="background-color: #ff0000;color: #FFFFFF;"
								v-if="item.istrue == 0">{{index+1}}</view> -->
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import subject from '@/components/subject.vue'
	import {
		doAnswer,
		doChapter,
		doAllAnswer,
		oneQuestionDetail,
		doPaper,
		doView,
		getViewRecord,
		doErrRecord,
		addAnswerRecord,
		getAnswerRecord
	} from '@/api/home.js'
	import {
		formatTime
	} from '@/utils/utils.js'
	let innerAudioContext = null
	export default {
		components: {
			subject
		},
		data() {
			return {
				timer: null,
				sliderDisabled: false,
				chapterList: false,
				modalName: false,
				tabCurren: 0,
				paperList: [],
				allList: [],
				current: 0,
				currentPage: 1,
				list: [],
				scrollTop: [],
				old: [],
				count: 0,
				curPlayTime: 0,
				playTime: 0,
				isPlay: false,
				swiperList: [],
				//下一题
				listcurret: 1,
				// 本题数据
				thisdet: {},
				lastShow: false,
				lastContent: '',
				city: '',
				show: false,
				// 选项正确错误个数
				chance_correct: 0,
				chance_error: 0,
				// 答题的对错记录
				maplist: []
			}
		},
		computed: {
			playTimeNum() {
				return formatTime(this.playTime)
			},
			curPlayTimeNum() {
				return formatTime(this.curPlayTime)
			}
		},
		onLoad(e) {
			// console.log(e)
			this.city = e.name
			this.getPaperList()
			// this.doChapterList(e.id, 0)
		},
		onUnload() {
			if (innerAudioContext) {
				innerAudioContext.destroy()
				innerAudioContext = null
			}
		},
		methods: {
			//添加答题记录
			async addanswer() {
				let query = {}
				query = {
					from: 'bank',
					type: 'voice',
					city: this.city,
					list: this.maplist
				}
				const {
					data
				} = await addAnswerRecord(query)
			},
			//获取答题记录
			async getAnswer() {
				let query = {}
				query = {
					from: 'bank',
					type: 'voice',
					city: this.city,
				}
				const {
					data,
				} = await getAnswerRecord(query)
				if (data != null) {
					if (data.list.length != 0) {
						// this.maplist = data.list
						for (let i in data.list) {
							for (let j in this.allList) {
								if (this.allList[j].id_ == data.list[i].id) {
									this.allList[j]['istrue'] = data.list[i].ischancetrue
									if (data.list[i].ischancetrue == 0) {
										this.chance_error += 1
									} else {
										this.chance_correct += 1
									}
								}
							}
						}
						this.$forceUpdate()
					}
				}
			},
			//添加浏览记录
			async getview() {
				const {
					data
				} = await doView({
					from: 'bank',
					type: 'voice',
					question_id: this.allList[this.listcurret - 1].id_,
					question_no: this.currentPage,
					city: this.city
				})
			},
			//获取浏览记录
			async hview() {
				let type = ''
				const {
					data,
				} = await getViewRecord({
					from: 'bank',
					type: 'voice',
					city: this.city
				})
				this.lastdet = data
				if (this.lastdet != null) {
					if (this.lastdet.question_no > 1) {
						this.lastContent = `上次看到${this.lastdet.question_no}题，是否继续?`
						this.lastShow = true
					}
				}
			},
			// 继续做题
			handContinue() {
				this.currentPage = this.lastdet.question_no
				this.listcurret = this.lastdet.question_no
				this.getonequestion('continue')
			},
			//获取所有题目id
			async getPaperList() {
				const {
					data
				} = await doAllAnswer({
					city: this.city
				})
				this.allList = data
				this.getAnswer()
				this.hview()
				this.getonequestion()
			},
			// 获取题目
			async getonequestion(e) {
				const {
					data,
				} = await oneQuestionDetail(this.allList[this.listcurret - 1].id_)
				// } = await oneQuestionDetail('1649')
				data.index = this.listcurret
				if (data.type_ == 2 || data.type_ == 3) {
					var options = [{
							options_name: data.an1_,
							zIndex: 'A',
							value: 1
						},
						{
							options_name: data.an2_,
							zIndex: 'B',
							value: 2
						},
						{
							options_name: data.an3_,
							zIndex: 'C',
							value: 3
						},
						{
							options_name: data.an4_,
							zIndex: 'D',
							value: 4
						},
						{
							options_name: data.an5_,
							zIndex: 'E',
							value: 5
						},
						{
							options_name: data.an6_,
							zIndex: 'F',
							value: 6
						},
						{
							options_name: data.an7_,
							zIndex: 'G',
							value: 7
						},
						{
							options_name: data.an8_,
							zIndex: 'H',
							value: 8
						},
						{
							options_name: data.an9_,
							zIndex: 'I',
							value: 9
						},
						{
							options_name: data.an10_,
							zIndex: 'J',
							value: 10
						},
					]
				}
				if (data.type_ == 1) {
					var options = [{
							options_name: '正确',
							zIndex: 'A',
							value: 1
						},
						{
							options_name: '错误',
							zIndex: 'B',
							value: 2
						},
					]
				}
				if (data.voice_file) {
					data.voice_file = data.voice_file.replace('http:', 'https:')
				}
				let istrues = this.$u.deepClone(data.answer_true)
				data.options = options
				data.istrue = istrues
				data.result = istrues
				data.answer_true = ''
				data.selectValue = ''
				if (data.type_ == 3) {
					data.istrue = Number(data.istrue)
					data.istrue = data.istrue.toString().split('').map(Number)
				}
				data.isfinish = false
				data.iscorrect = ''
				data.goods_ds = []
				// this.swiperList.push(data)
				this.thisdet = data
				console.log(this.swiperList[this.currentPage])
				if (this.listcurret != 1 && e == undefined) {
					this.currentPage = this.currentPage + 1
				}
				this.getview()
				this.onPlay()
			},
			// 章节选择
			// async showModel() {
			// 	// await this.getList()
			// 	this.modalName = true
			// },
			// hideModal(){
			// 	this.modalName = false
			// },
			onPlay(index) {
				if (this.currentPage == 1)
					var url = this.$u.deepClone(this.thisdet.voice_file)
				else {
					var url = this.$u.deepClone(this.thisdet.voice_file)
				}
				if (innerAudioContext) {
					innerAudioContext.destroy()
					innerAudioContext = null
				}
				innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.obeyMuteSwitch = false;
				innerAudioContext.autoplay = true;

				innerAudioContext.src = url;
				innerAudioContext.onPlay(() => {
					this.sliderDisabled = false
					this.isPlay = true
				});
				innerAudioContext.onCanplay(res => {
					this.playTime = innerAudioContext.duration
				})
				innerAudioContext.onEnded(() => {
					this.handNext()
				})
				this.bindAuidoCallback()
			},
			bindAuidoCallback() {
				innerAudioContext.onTimeUpdate(e => {
					if (innerAudioContext.currentTime > 0 && innerAudioContext.currentTime <= 1) {
						this.curPlayTime = 1
					}
					if (this.curPlayTime !== Math.floor(innerAudioContext.currentTime))
						this.curPlayTime = Math.floor(innerAudioContext.currentTime)

					if (this.playTime !== Math.floor(innerAudioContext.duration))
						this.playTime = Math.floor(innerAudioContext.duration)
				})
			},
			sliderChange(e) {
				this.curPlayTime = e.detail.value;
				innerAudioContext.seek(e.detail.value)
			},
			onSwitch() {
				if (this.isPlay) {
					innerAudioContext.pause()
					this.isPlay = false
				} else {
					innerAudioContext.play()
					this.isPlay = true
				}
			},
			//上一页
			handUp() {
				if (this.currentPage == 1) {
					uni.showToast({
						title: '当前已是第一题',
						icon: 'none'
					})
					return
				}
				this.currentPage = this.currentPage - 1
				this.listcurret = this.listcurret - 1
				const isResult = this.swiperList.find(el => el.id_ == this.allList[this.listcurret - 1].id_)
				if (isResult != undefined) {
					this.thisdet = isResult
				} else {
					this.getonequestion("last")
				}
			},
			//选择题目
			chance_question(item, index) {
				this.currentPage = index + 1
				this.listcurret = index + 1
				this.show = false
				let id = ''
				id = this.allList[this.listcurret - 1].id_
				const isResult = this.swiperList.find(el => el.id_ == id)
				if (isResult != undefined) {
					this.thisdet = isResult
				} else {
					this.getonequestion('continue')
				}
				this.onPlay()
			},
			handNext() {
				if (this.allList.length == this.currentPage) {
					uni.showToast({
						title: '已经到最后一题了',
						icon: 'none'
					})
					return
				}
				let date = {
					id: this.thisdet.id_,
					ischancetrue: 1,
				}
				this.allList[this.listcurret - 1].istrue = 1
				if (this.maplist.length != 0) {
					const isResult = this.maplist.find(el => el.id == date.id)
					if (isResult == undefined) {
						this.maplist.push(date)
					} else {
						for (let i in this.maplist) {
							if (this.maplist[i].id == isResult.id) {
								this.maplist[i] = date
							}
						}
					}
				} else {
					this.maplist.push(date)
				}
				this.addanswer()
				this.qid = this.allList[this.currentPage - 1].id_
				this.listcurret = this.listcurret + 1
				const isResult = this.swiperList.find(el => el.id_ == this.allList[this.listcurret - 1].id_)
				if (isResult != undefined) {
					this.currentPage = this.currentPage + 1
					this.thisdet = isResult
				} else {
					this.getonequestion()
				}
			},
			//添加错题记录
			async goerror(city, questionid) {
				const {
					data
				} = await doErrRecord({
					city: city,
					question_id: questionid
				})
			},

			handChange(e, info) {
				if (this.thisdet.type_ == '3') {
					this.thisdet = info
				}
				// this.thisdet
				//单选判断
				if (this.thisdet.type_ != '3') {
					if (this.thisdet.istrue == e) {
						this.thisdet.answer_true = e
						this.thisdet.selectValue = e
						this.chance_correct = this.chance_correct + 1
						this.allList[this.listcurret - 1].istrue = 1
						// console.log('111')
					} else {
						this.thisdet.selectValue = e
						this.chance_error = this.chance_error + 1
						this.allList[this.listcurret - 1].istrue = 0
						// this.goerror(this.thisdet.city_, this.thisdet
						// 	.id_)
					}
				}
				// 多选题
				else {
					//对比是否数组相等
					const isArrEqual = (arr1, arr2) => {
						return arr1.length === arr2.length && arr1.every((ele) => arr2.includes(ele));
					};
					if (isArrEqual(this.thisdet.istrue, e)) {
						this.chance_correct = this.chance_correct + 1
						this.thisdet.answer_true = e
						this.thisdet.selectValue = e
						this.allList[this.listcurret - 1].istrue = 1
						// console.log('111')
					} else {
						this.chance_error = this.chance_error + 1
						this.thisdet.selectValue = e
						this.allList[this.listcurret - 1].istrue = 0
						// this.goerror(this.thisdet.city_, this.thisdet
						// 	.id_)
					}
				}
				if (this.thisdet.answer_true) {
					if (this.currentPage != this.allList.length) {
						setTimeout(() => {
							if (this.currentPage < this.listcurret) {
								this.currentPage = this.currentPage + 1
								return
							} else
								this.listcurret = this.listcurret + 1
							this.qid = this.allList[this.currentPage - 1].id_
							this.getonequestion()
						}, 600)
					} else {
						uni.showToast({
							title: '已经到最后一题了',
							icon: 'none'
						})
					}
				}
				let date = {
					id: this.thisdet.id_,
					ischancetrue: this.allList[this.listcurret - 1].istrue,
				}
				if (this.maplist.length != 0) {
					const isResult = this.maplist.find(el => el.id == date.id)
					if (isResult == undefined) {
						this.maplist.push(date)
					} else {
						for (let i in this.maplist) {
							if (this.maplist[i].id == isResult.id) {
								this.maplist[i] = date
							}
						}
					}
				} else {
					this.maplist.push(date)
				}
				this.addanswer()
				this.swiperList.push(this.thisdet)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.answer {
		height: 100vh;
		background-color: #F5F6F9;
		display: flex;
		flex-direction: column;

		.nav {
			padding: 29rpx 36rpx;

			image {
				width: 34rpx;
				height: 34rpx;
			}

			.nums {
				margin-left: 15rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #838A9D;
			}
		}
	}

	.card {
		flex: 1;

		.scroll-Y {
			height: 100%;
		}

		.btns {
			margin-top: 20rpx;
		}

		.btn {
			width: 702rpx;
			margin: 40rpx auto 0 20rpx;


			.nxt-btn {
				width: 100%;
				height: 92rpx;
				background: #E3E3E3;
				border-radius: 20rpx;
				height: 0;
				overflow: hidden;
				transition: height 0.25s;
			}

			.up-btn {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #838A9D;
			}

			.down-btn {
				background-color: #36c269;
				color: #FFFFFF;
			}
		}
	}

	.music {
		padding-bottom: 80rpx;

		.slider-bar {
			display: flex;
			width: 100%;
			color: #838A9D;
			bottom: 160rpx;
			align-items: center;
			justify-content: center;

			.line {
				flex: 1;
			}

			.time {
				height: 28rpx;
				line-height: 28rpx;
				font-size: 24rpx;
				min-width: 66rpx;
			}

			.line {
				margin: 20rpx 40rpx;
			}

			.start {
				margin-left: 30rpx;
			}

			.end {
				margin-right: 30rpx;
			}
		}

		.upper,
		.next {
			image {
				width: 40rpx;
				height: 47rpx;
			}
		}

		.play {
			image {
				width: 105rpx;
				height: 106rpx;
			}
		}

		.cha-list {
			image {
				width: 31rpx;
				height: 32rpx;
			}
		}
	}

	.cu-dialog {
		background-color: #F6F5FA;
		border-radius: 40rpx 40rpx 0 0 !important;
		padding-top: 10rpx !important;

		.cuIcon-roundclose {
			font-weight: bold;
			font-size: 40rpx;
		}

		.tabs {
			margin: -40rpx 100rpx 0 100rpx;
			position: relative;
			padding-bottom: 20rpx;
			height: 70rpx;

			.tab {
				flex: 1;
				color: #838A9D;
				font-size: 34rpx;
				transition: all 0.3s;

				&-active {
					color: #333;
					font-weight: bold;
					font-size: 36rpx;
				}
			}

			.ht {
				width: 56rpx;
				height: 10rpx;
				background: #36c269;
				border-radius: 5rpx;
				position: absolute;
				bottom: 0;
				transition: all 0.3s;
			}
		}

		.list {
			padding-top: 40rpx;

			.cell {
				width: 702rpx;
				height: 144rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin: 0 auto 0 auto;
				padding: 20rpx;

				&:not(:first-child) {
					margin-top: 20rpx;
				}

				.name {
					flex: 1;
					font-size: 29rpx;
					line-height: 51rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #2D3341;
					text-align: left;

				}

				&-right {
					margin-left: 80rpx;

					.value {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #838A9D;
					}

					.cuIcon-right {
						margin-left: 5rpx;
						color: #060606;
					}
				}
			}

		}
	}

	.pop_bg {
		width: 750rpx;
		height: 874rpx;
		background: #FFFFFF;

		.collect_ttile {
			font-size: 40rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-left: 46rpx;
		}

		.number {
			width: 60rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-left: 14rpx;
		}

		.pop_number {
			font-size: 40rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			text-align: right;
			width: 130rpx;
			margin-left: 575rpx;
		}

		.pop_line {
			width: 702rpx;
			height: 1rpx;
			opacity: 1;
			background-color: #DDDDDD;
			margin: 0 auto;
			margin-top: 42rpx;
		}

		.scroll-view {
			white-space: nowrap;
			height: 680rpx;
			width: 100%;
			margin-top: 48rpx;

			.tag_bg {
				width: 94rpx;
				height: 78rpx;
				background: #F5F5F5;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 36rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				margin-top: 26rpx;
				margin-left: 28rpx;
			}

			.enter_tag_bg {
				width: 94rpx;
				height: 78rpx;
				background: #F5F5F5;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 36rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				margin-top: 26rpx;
				margin-left: 28rpx;
			}
		}
	}
</style>